<template>
	<view class="page">
		<view v-if="params.status == 0" class="top-prompt">审核中，请留意审核信息！</view>
		<view v-else-if="params.status == 2" class="top-prompt error">审核拒绝，{{ params.reviewRemark || '' }}</view>
		<view v-else-if="params.status == 1" class="top-prompt success">审核通过，您当前是{{ params.type == 1 ? '预备' : '正式'}}陪诊师！
		</view>
		<view class="image-photos">
			<view>
				<view class="title">形象照片</view>
				<view class="tip">展示于陪诊师列表中</view>
			</view>
			<image class="avatat" :src="params.photo ? params.photo : '/static/images/UploadSmall@2x.png'"
				@click="chooseImg(1)" mode="aspectFill"></image>
		</view>

		<view class="userinfo-list">
			<view class="userinfo-item">
				<view class="userinfo-title">姓名</view>
				<input v-model="params.name" class="userinfo-tip" placeholder="请输入您的姓名" />
			</view>
			<view class="userinfo-item">
				<view class="userinfo-title">性别</view>
				<view class="userinfo-tip">
					<view class="sex-checkbox">
						<view class="check-box" @click="chooseSex(1)">
							<image v-if="params.sex == 2" class="check-box-img" src="/static/images/Primarynot@2x.png"></image>
							<image v-if="params.sex == 1" class="check-box-img" src="/static/images/Primaryelection@2x.png"></image>
							<text>男</text>
						</view>
						<view class="check-box" @click="chooseSex(2)">
							<image v-if="params.sex == 1" class="check-box-img" src="/static/images/Primarynot@2x.png"></image>
							<image v-if="params.sex == 2" class="check-box-img" src="/static/images/Primaryelection@2x.png"></image>
							<text>女</text>
						</view>
					</view>
				</view>
			</view>
			<view class="userinfo-item">
				<view class="userinfo-title">年龄</view>
				<input class="userinfo-tip" v-model="params.age" placeholder="请输入周岁年龄" />
			</view>
			<view class="userinfo-item">
				<view class="userinfo-title">手机号</view>
				<input class="userinfo-tip" v-model="params.phone" placeholder="请输入手机号码" />
			</view>
			<view class="userinfo-item">
				<view class="userinfo-title">介绍</view>
				<input class="userinfo-tip" v-model="params.introduction" placeholder="请输入您的介绍" />
			</view>
			<view class="userinfo-item" @click.stop="selectCity()">
				<view class="userinfo-title">服务城市</view>
				<view class="userinfo-tip" v-if="params.status == 0 || params.status == 1">
					{{ params.provinceName }}-{{ params.cityName }}

				</view>
				<view v-else>
					<image v-if="!address" class="image-icon" src="/static/images/ic_next.png"></image>
					<view v-else class="userinfo-tip">{{ address }}</view>
				</view>
			</view>
		</view>
		<view class="identity-card">
			<view class="title">上传身份证</view>
			<view class="identity-card-image">
				<image class="image" @click="chooseImg(2)" mode="aspectFill"
					:src="params.idCardPhotoA ? params.idCardPhotoA : '/static/images/straight@2x.png'"></image>
				<image class="image" @click="chooseImg(3)" mode="aspectFill"
					:src="params.idCardPhotoB ? params.idCardPhotoB : '/static/images/reverseside@2x.png'"></image>
			</view>
		</view>

		<view class="resume-info">
			<view class="title">上传简历</view>
			<view class="resume" :class="params.resume ? 'active' : ''" @click="chooseFile">
				<image v-if="params.resume" class="image" src="/static/images/biographicalnotes.png"></image>
				<image v-else class="image" src="/static/images/uploadzl.png"></image>
				<view>{{ params.resume ? '简历已上传' : '上传' }}</view>
			</view>
		</view>

		<view class="user-agreement" v-if="params.status != 0 && params.status != 1">
			<view @click="check">
				<image class="agreement-icon" v-if="isChecked" src="/static/images/selected@3x.png"></image>
				<image class="agreement-icon" v-else src="/static/images/NotselectedXXD@3x.png"></image>
			</view>
			<view class="agreement-text">
				我已阅读并同意
				<text @click="toAgreement(6)">《用户协议》</text>
				和
				<text @click="toAgreement(4)">《隐私政策》</text>
			</view>
		</view>

		<view v-if="params.status != 0 && params.status != 1" class="order-btn" @click="submit">提交入驻申请</view>
		<simple-address ref="simpleAddress" :hideColumn="2" :pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"></simple-address>
	</view>
</template>

<script>
	import {
		uploadFile,
		attendantStationed,
		getApplicationByParam
	} from '@/apis/request.js';
	import {
		checkMobile
	} from '@/utils/index.js';

	export default {
		data() {
			return {
				isChecked: false,
				params: {
					age: '',
					idCardPhotoA: '',
					idCardPhotoB: '',
					introduction: '',
					name: '',
					phone: '',
					photo: '',
					resume: '',
					sex: 1, //性别 1男 2女
					provinceName: '',
					provinceId: '',
					cityName: '',
					cityId: '',
					areaName: '',
					areaId: ''
				},
				cityPickerValueDefault: [0, 0, 0],
				address: ''
			};
		},
		onLoad() {
			this.getApplicationByParam();
		},
		methods: {
			chooseSex(flag) {
				//flag 1男 2女
				this.params.sex = flag;
			},
			//上传照片
			chooseImg(type) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						let path = res.tempFilePaths[0];
						uploadFile(path).then(ress => {
							if (type == 1) {
								//头像
								this.params.photo = ress;
							} else if (type == 2) {
								//身份证正面
								this.params.idCardPhotoA = ress;
							} else {
								//身份证反面
								this.params.idCardPhotoB = ress;
							}
						});
					}
				});
			},
			chooseFile() {
				uni.chooseMessageFile({
					count: 1,
					success: res => {
						let path = res.tempFiles[0].path;
						uploadFile(path).then(ress => {
							this.params.resume = ress;
						});
					}
				});
			},
			submit() {
				this.params.age = Number(this.params.age);
				if (!this.params.photo) {
					this.$Toast('请上传您的照片');
					return;
				}
				if (!this.params.name) {
					this.$Toast('请填写您的姓名');
					return;
				}
				if (!this.params.sex) {
					this.$Toast('请勾选您的性别');
					return;
				}
				if (!this.params.age) {
					this.$Toast('请填写您的年龄');
					return;
				}
				if (!this.params.phone) {
					this.$Toast('请填写您的手机号');
					return;
				}
				if (!checkMobile(this.params.phone)) {
					this.$Toast('请填写正确的手机号');
					return;
				}
				if (!this.params.introduction) {
					this.$Toast('请填写您的介绍');
					return;
				}
				if (!this.address) {
					this.$Toast('请选择您的服务城市');
					return;
				}
				if (!this.params.idCardPhotoA) {
					this.$Toast('请上传您的身份证人像面');
					return;
				}
				if (!this.params.idCardPhotoB) {
					this.$Toast('请上传您的身份证国徽面');
					return;
				}
				if (!this.isChecked) {
					this.$Toast('请勾选协议');
					return;
				}
				attendantStationed(this.params).then(res => {
					this.$Toast('入驻成功，请等待审核！');
					this.getApplicationByParam();
				});
			},
			//用户协议 隐私协议
			toAgreement(type) {
				uni.navigateTo({
					url: `/pages/other/article/article?type=${type}`
				});
			},
			getApplicationByParam() {
				getApplicationByParam().then(res => {
					if (res) {
						this.params = res;
					}
				});
			},
			//选择城市
			selectCity() {
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.params.provinceName = e.labelArr[0];
				this.params.provinceId = e.provinceCode;
				this.params.cityName = e.labelArr[1];
				this.params.cityId = e.cityCode;
				this.params.areaName = e.labelArr[2];
				this.params.areaId = e.areaCode;
				this.address = e.label;
			},
			check() {
				this.isChecked = !this.isChecked;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f2f2f2ff;
		height: 100%;
		min-height: 100vh;
		padding-bottom: 30rpx;

		.top-prompt {
			height: 88rpx;
			line-height: 88rpx;
			width: 750rpx;
			text-align: center;
			font-size: 30rpx;
			color: white;
			background-color: $uni-color-warning;

			&.success {
				background-color: $uni-color-success;
			}

			&.error {
				background-color: $uni-color-error;
			}
		}

		.image-photos {
			padding: 20rpx 30rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-size: 30rpx;
			}

			.tip {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999999;
			}

			.avatat {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
			}
		}

		.userinfo-list {
			margin-top: 20rpx;
			background-color: #fff;

			.userinfo-item {
				padding: 30rpx;
				border-bottom: 2rpx solid #e8e8e8;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.userinfo-title {
					font-size: 30rpx;
					width: 200rpx;
				}

				.image-icon {
					width: 18rpx;
					height: 26rpx;
				}

				.userinfo-tip {
					width: 100%;
					text-align: right;
					color: #333;
					font-size: 28rpx;

					.sex-checkbox {
						float: right;
						width: 200rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.check-box {
							display: flex;
							flex-direction: row;
							align-items: center;

							.check-box-img {
								width: 34rpx;
								height: 34rpx;
							}

							text {
								margin-left: 10rpx;
								font-size: 28rpx;
								color: #020202;
							}
						}
					}
				}
			}
		}

		.identity-card {
			margin-top: 20rpx;
			background-color: #fff;
			padding: 30rpx;

			.title {
				font-size: 30rpx;
			}

			.identity-card-image {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;

				.image {
					width: 324rpx;
					height: 280rpx;
				}
			}
		}

		.resume-info {
			margin-top: 20rpx;
			background-color: #fff;
			padding: 30rpx;

			.title {
				font-size: 30rpx;
			}

			.resume {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				width: 324upx;
				height: 60upx;
				background: #32C59A;
				border-radius: 10upx;

				.image {
					flex-shrink: 0;
					width: 34rpx;
					height: 34rpx;
				}

				view {
					padding: 0upx 5upx;
					font-size: 26upx;
					color: white;
				}

				&.active {
					background: #f5f7f8;

					view {
						color: #333333;
					}
				}
			}
		}

		.user-agreement {
			margin: 60rpx 130rpx 20rpx 130rpx;
			display: flex;
			align-items: center;

			.agreement-icon {
				width: 24rpx;
				height: 24rpx;
			}

			.agreement-text {
				margin-left: 10rpx;
				font-size: 22rpx;
				color: #6e7a94;

				text {
					color: #2074f3;
				}
			}
		}

		.order-btn {
			width: 690rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 30rpx;
			color: #ffff;
			background-color: #32C59A;
			border-radius: 44rpx;
			margin: 0 auto;
		}
	}
</style>